<template>
  <div class="wrapper">
      <button @click="handler">{{ counter }}</button>
      <p>{{ message }}</p>
      <a href="https://v3.cn.vuejs.org/api/sfc-script-setup.html">sfc-script-setup</a>
  </div>
</template>

<!-- 声明 setup 属性的 script 元素相当于 `选项式API` 中的 setup 函数 -->
<script setup>
// 导入 ref 函数
import { ref , watch } from 'vue';

// 定义数据 
const counter = ref( 1000 );
// 函数 ref 接受一个内部值并返回一个响应式且可变的 Ref 实例。
// Ref实例 仅有一个 `value` 属性(property)，它指向该内部值。
const message = ref( '偶数' );

// 定义方法
function handler(){
    // 通过 Ref实例 的 value 属性来操控 counter 中的内部值
    counter.value++;
}

// 侦听 counter 的变化
watch( () => counter.value , (curr,prev) => message.value = curr % 2 == 0 ? '偶数' : '奇数' );

</script>

<style scoped>
.wrapper {
  margin: 15px;
  border: 1px solid #dedede;
  box-shadow: 0 0 20px -10px blue;
}
</style>